<template>
  <q-card
    class="stat-card"
    :class="`stat-${color}`"
    flat
    @mouseenter="hover = true"
    @mouseleave="hover = false"
  >
    <div class="stat-bg" :class="{ hover }"></div>

    <q-card-section class="stat-content">
      <div class="row items-center no-wrap">
        <!-- 图标区域 -->
        <div class="stat-icon">
          <q-icon :name="icon" size="28px" :color="hover ? 'white' : color" />
        </div>

        <!-- 内容区域 -->
        <div class="col q-pl-md">
          <div class="text-caption text-weight-medium">{{ title }}</div>
          <div class="row items-end no-wrap q-mt-xs">
            <div class="text-h5 text-weight-bold q-mr-sm">{{ value }}</div>
            <q-badge :color="hover ? 'white' : color" :text-color="hover ? color : 'white'" rounded>
              <q-icon
                :name="change.startsWith('+') ? 'arrow_upward' : 'arrow_downward'"
                size="14px"
                class="q-mr-xs"
              />
              {{ change }}
            </q-badge>
          </div>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  title: String,
  value: [String, Number],
  change: String,
  icon: String,
  color: String,
})

const hover = ref(false)
</script>

<style lang="scss" scoped>
.stat-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1;
  min-height: 100px;

  .stat-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    z-index: -1;
    transition: all 0.4s ease;

    &.hover {
      opacity: 1;
    }
  }

  .stat-content {
    padding: 16px;
    transition: all 0.3s ease;
  }

  .stat-icon {
    padding: 12px;
    border-radius: 10px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }

  // 不同颜色的卡片样式
  &.stat-primary {
    .stat-bg {
      background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
    }
    .stat-icon {
      box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
    }
    &:hover {
      box-shadow: 0 10px 20px rgba(25, 118, 210, 0.2);
    }
  }

  &.stat-green {
    .stat-bg {
      background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
    }
    .stat-icon {
      box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    }
    &:hover {
      box-shadow: 0 10px 20px rgba(76, 175, 80, 0.2);
    }
  }

  &.stat-orange {
    .stat-bg {
      background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%);
    }
    .stat-icon {
      box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
    }
    &:hover {
      box-shadow: 0 10px 20px rgba(255, 152, 0, 0.2);
    }
  }

  &.stat-red {
    .stat-bg {
      background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
    }
    .stat-icon {
      box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
    }
    &:hover {
      box-shadow: 0 10px 20px rgba(244, 67, 54, 0.2);
    }
  }

  &:hover {
    transform: translateY(-5px);

    .stat-content {
      transform: scale(1.02);
    }

    .stat-icon {
      transform: rotate(10deg) scale(1.1);
      background: transparent;
    }
  }
}
</style>
